<template>
  <div>
    <el-button @click="toPinia">跳转到WebSocket.vue</el-button>
    <div class="canvasBox">
      <canvas id="canvas" width="500" height="300"></canvas>
    </div>
    <img :src="imgSrc" style="width: 50px" id="imgBox"/>
  </div>
</template>

<script setup>
import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
import {triggerDelay} from '@/untils/untils'
import {onMounted} from "vue";
const route = useRoute()
const router = useRouter()
let imgSrc = require('@/assets/logo.png')
const toPinia = () => {
  router.push({
    path: '/comlibrary/webSocket',
    query: { username: 'eduardo' }
  })
}
onBeforeRouteLeave(() => {
  console.log('主线程卡死案例触发， 5s后结束')
  triggerDelay()
  const answer = window.confirm('确定离开当前页面')
  if (!answer) return false
})

function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas?.getContext) {
    const ctx = canvas.getContext("2d");
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(50, 50, 50, 50);
    ctx.strokeRect(40, 40, 50, 50);
    ctx.moveTo(0,0);
    ctx.lineTo(125,125);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(120,120,40,0,2*Math.PI);
    ctx.stroke();
    ctx.font="30px Arial";
    ctx.fillText("Hello World",125,50);
    ctx.strokeText("Hello World",125,125);
    let imgBox = document.getElementById("imgBox");
    ctx.drawImage(imgBox, 150, 0, 50, 50);
  }
}

onMounted(() => {
  draw()
})

</script>
<script>
export default {
  name: "Pinia"
}
</script>

<style scoped>
.canvasBox {
  width: 100%;
  height: 300px;
  border: 1px solid red;
}

</style>